<template>
  <div class="home">
    <div class="top">
      <el-col :span="6" class="top-left">
        <el-card shadow="always">
          <el-icon style="width:50px;height:50px;color:#79D9D7">
            <Grid style="width:50px;height:50px;color:#79D9D7" />
          </el-icon>
          <div>
            <p style="margin-top:0px">商品数量</p>
            <!-- startVal开始数字；endVal结束数字 -->
            <count-to :startVal='startVal' :endVal='data.goodsCount' :duration='3000'></count-to>
          </div>
        </el-card>     
        <el-card shadow="always">
          <el-icon style="width:50px;height:50px;color:#36A3F7">
            <ChatDotSquare style="width:50px;height:50px;color:#36A3F7" />
          </el-icon>
          <div>
            <p style="margin-top:0px">未发货单</p>
            <count-to :startVal='startVal' :endVal='data.waitStockCount' :duration='3000'></count-to>
          </div>
        </el-card>
      </el-col>
      <el-col :span="14" class="top-right">
        <div id="daysOrder" style="width: 100%;height:100%;"></div>
      </el-col>
    </div>

    <div class="bottom">
      <el-col class="box1">
        <div id="daysSum" style="width: 100%;height:100%;"></div>
      </el-col>
      <el-col class="box2">
        <div id="area" style="width: 100%;height:100%;"></div>
      </el-col>
      <el-col class="box3">
        <div id="channel" style="width: 100%;height:100%;"></div>
      </el-col>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { post } from "@/util/http";
import countTo from '@/components/CountTo/vue-count-to/src/vue-countTo.vue';//数字滚动插件
import { Grid, ChatDotSquare } from "@element-plus/icons-vue";
export default {
  components: {
    countTo,
    Grid,
    ChatDotSquare,
  },
  data() {
    return {
      Grid,
      ChatDotSquare,
      startVal: 0,
      data: {},
    };
  },
  mounted(){
 this.echarts();
  },
  created() {
    this.echarts();
  },
  methods: {
    echarts() {
      // if (document.getElementById('daysSum') == null || document.getElementById('area') == null || document.getElementById('channel') == null) {
      //   return
      // }
      // echarts.dispose(document.getElementById('daysSum'))
      // echarts.dispose(document.getElementById('area'))
      // echarts.dispose(document.getElementById('channel'))

      // this.charts = echarts.init(document.getElementById('daysSum'))
      // this.charts = echarts.init(document.getElementById('area'))
      // this.charts = echarts.init(document.getElementById('channel'))
      // this.charts.setOption({})

      let data = {
        _gp: "admin.dashboard",
        _mt: "integral",
      };
      post(data).then((res) => {
        console.log(res);
        this.data = res.data.data;
        this.daysOrder();
        this.daysSum();
        this.area();
        this.channel();
      });
    },
    daysOrder() {
      var chartDom = document.getElementById("daysOrder");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        legend: {
          data: ["订单数"],
          right: "5%",
        },
        title: {
          text: "七日订单",
          subtext: "订单数",
        },
        xAxis: {
          type: "category",
          data: this.data.daysOrder[0],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "订单数",
            data: this.data.daysOrder[1],
            type: "bar",
            color: "#00B5FF",
            barWidth: 30,
          },
        ],
      };

      option && myChart.setOption(option);
         window.addEventListener('resize',function () {
          myChart.resize();
        }, true);
    },
    daysSum() {
      var chartDom = document.getElementById("daysSum");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        legend: {
          data: ["订单数"],
          right: "5%",
        },
        title: {
          text: "七日订单",
          subtext: "订单数",
        },
        xAxis: {
          type: "category",
          data: this.data.daysSum[0],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "订单数",
            data: this.data.daysSum[1],
            type: "line",
            color: "#7AD1CC",
          },
        ],
      };

      option && myChart.setOption(option);
         window.addEventListener('resize',function () {
          myChart.resize();
        }, true);
    },
    area() {
      var chartDom = document.getElementById("area");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: "订单地区分布",
          left: "10%",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          right: "right",
        },
        series: [
          {
            name: "地区分布",
            type: "pie",
            radius: "50%",
            data: this.data.area,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
         window.addEventListener('resize',function () {
          myChart.resize();
        }, true);
    },
    channel() {
      var chartDom = document.getElementById("channel");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: "订单渠道分布",
          left: "10%",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          //右上角的图标
          orient: "vertical",
          right: "right",
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            data: this.data.channel,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);
         window.addEventListener('resize',function () {
          myChart.resize();
        }, true);

    },
  },
};
</script>
<style lang="less" scoped>
.home {
  padding: 20px 30px;
  overflow: hidden;
  background-color: white !important;
  .top {
    width: 100%;
    .top-left {
      width: 240px;
      margin: 50px 10% 0px 0px;
      .el-card {
        margin-bottom: 20px;
        div {
          line-height: 25px;
          color: rgb(99, 97, 97);
          font-weight: 900;
          float: right;
        }
      }
      img {
        width: 40px;
        height: 40px;
      }
    }
  }
}

@media screen and (min-width: 1488px) {
  .top-right {
    width: 80%;
    height: 400px;
  }
  .bottom {
    width: 100%;
    .box1,
    .box2,
    .box3 {
      width: 32%;
      height: 400px;
    }
  }
}
@media screen and (max-width: 1488px) {
  .el-card {
    div {
      display: none;
    }
  }
  .top-right {
    width: 100%;
    height: 400px;
  }
  .bottom {
    width: 100%;
    .box1 {
      width: 100%;
      height: 400px;
      margin: auto;
    }
    .box2,
    .box3 {
      width: 50%;
      height: 400px;
    }
  }
}

@media screen and (max-width: 1053px) {
  .el-card {
    width: 90px;
    margin-bottom: 20px;
    div {
      display: none;
    }
  }
  .top-right {
    width: 50%;
    height: 400px;
  }

  .box1 {
    width: 100%;
    margin: auto;
  }
  .bottom {
    .box2,
    .box3 {
      width: 100%;
      height: 400px;
      margin: auto;
    }
  }
}
</style>